<template>
  <div class="table-container">
    <!-- 表格拖拽列宽 -->
    <div class="video-wrap-hls">
      <div style="width:100px">拖动</div>
    </div>
    <table id="tb_3" border="1" cellpadding="0" cellspacing="0" align="center">
      <tr v-for="(tr,rIndex) in list" :key="rIndex">
        <template v-for="(td,dIndex) in tr.children">
          <td :key="dIndex" style="height:80px">
            <div v-if="td &&td.colspan">colspan:{{td.colspan}}</div>
            <div v-if="td && td.rowspan">rowspan:{{td.rowspan}}</div>
          </td>
        </template>
      </tr>
    </table>
    <div style="height:100px"></div>
    <table id="tb_3" border="1" cellpadding="0" cellspacing="0" align="center">
      <tr v-for="(tr,rIndex) in list" :key="rIndex" :id="tr.label">
        <template v-for="(td,dIndex) in tr.children">
          <td
            v-if="td && td.colspan && td.rowspan"
            :key="dIndex"
            :colspan="td.colspan"
            :rowspan="td.rowspan"
            :id="td.label"
            :style="{ width: td.width  + '%' }"
            @mousedown="dragStart($event, dIndex,rIndex)"
          >
            <div style="margin-right:16px;">
              <div style="font-size:12px;color:#f56c6c;margin-bottom:5px">{{rIndex}}x{{dIndex}}</div>
              <div>{{td}}</div>
              <el-dropdown @command="handleSelect($event,list,rIndex,dIndex,tr,td)" trigger="click">
                <el-button icon="el-icon-edit" si ze="mini" />
                <template #dropdown>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="item in defaultOptions(list,rIndex,dIndex,tr,td)"
                      :command="item.value"
                      :key="item.value"
                      :divided="item.divided"
                      :disabled="item.disabled"
                    >{{item.label}}</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </td>
        </template>
      </tr>
    </table>
    <!-- <div v-if="dragging" class="resize-guide" :style="{ left: guideLeft + 'px' }"></div>
    {{dragging}}-->
  </div>
</template>

<script>
import { deepClone } from "../../components/formGenerator/utils";
import * as table from "./table";
import { defaultOptions, tableData, getLeftTd, getRightTd } from "./table";
export default {
  data() {
    return {
      list: tableData,
      defaultCell: {
        colspan: 1,
        rowspan: 1,
        children: []
      },
      dragging: null,
      guideLeft: 0 // 引导线距离左侧窗口的距离
    };
  },
  watch: {
    list: {
      immediate: true,
      deep: true,
      handler(newValue) {
        console.log("newValue", newValue);
      }
    }
  },
  mounted() {
    // this.init();
  },

  methods: {
    defaultOptions,
    handleSelect(value, list, rIndex, dIndex) {
      table[value](list, rIndex, dIndex);
    },
    dragStart(event, dIndex, rIndex) {
      const { td } = getLeftTd(this.list, rIndex, dIndex);
      const tdEl = document.getElementById(td.label);
      // 只有在边界时允许移动
      if (tdEl.getBoundingClientRect().right - event.clientX > 6) return;
      this.dragging = {
        column: dIndex - 1 + td.colspan,
        startX: event.clientX, // 点击处距离左侧窗口距离
        moveWidth: 0 // 移动的距离
      };
      this.guideLeft = event.clientX; // 引导线的位置

      // document.addEventListener("mousemove", this.drag);
      // document.addEventListener("mouseup", this.dragEnd);
    },
    drag(event) {
      if (!this.dragging) return;
      this.guideLeft = event.clientX;
      // 移动的距离
      this.dragging.moveWidth = this.guideLeft - this.dragging.startX;
    },
    dragEnd() {
      const table = document.getElementById("tb_3");
      // 整个表格的宽度
      const tableWidth = table.getBoundingClientRect().width;
      // 移动的宽度 / 表格宽度 = 移动的百分比
      const percent = (this.dragging.moveWidth / tableWidth) * 100;
      console.log("移动的百分比：", percent);
      this.list.forEach((tr, rIndex) => {
        const { td, index } = getLeftTd(
          this.list,
          rIndex,
          this.dragging.column
        );
        const { td: td2 } = getRightTd(
          this.list,
          rIndex,
          this.dragging.column + 1
        );
        if (index - 1 + td.colspan == this.dragging.column) {
          const tdEl = document.getElementById(td.label);
          tdEl.setAttribute("style", "background: pink;");
          const tdEl2 = document.getElementById(td2.label);
          tdEl2.setAttribute("style", "background: green;");
          // 相邻两个表格的整体宽度
          // td.width += percent;
          // td2.width -= percent;
          const width = td.width + percent;
          const width2 = td2.width - percent;
          const minWidth = (200 / tableWidth) * 100;
          if (width > minWidth && width2 > minWidth) {
            td.width = width;
            td2.width = width2;
          }
        }
      });
      // 移动结束
      this.dragging = null;
      document.removeEventListener("mousemove", this.drag);
      document.removeEventListener("mouseup", this.dragEnd);
    },

    init() {
      let tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题
      const table = document.getElementById("tb_3");
      for (let j = 0; j < table.rows[0].cells.length; j++) {
        table.rows[0].cells[j].onmousedown = function() {
          //记录单元格
          tTD = this;
          if (event.offsetX > tTD.offsetWidth - 10) {
            tTD.mouseDown = true;
            tTD.oldX = event.x;
            tTD.oldWidth = tTD.offsetWidth;
          }
          //记录Table宽度
          //table = tTD; while (table.tagName != ‘TABLE') table = table.parentElement;
          //tTD.tableWidth = table.offsetWidth;
        };
        table.rows[0].cells[j].onmouseup = function() {
          //结束宽度调整
          if (tTD == undefined) tTD = this;
          tTD.mouseDown = false;
          tTD.style.cursor = "default";
        };
        table.rows[0].cells[j].onmousemove = function() {
          //更改鼠标样式
          if (event.offsetX > this.offsetWidth - 10)
            this.style.cursor = "col-resize";
          else this.style.cursor = "default";
          //取出暂存的Table Cell
          if (tTD == undefined) tTD = this;
          //调整宽度
          if (tTD.mouseDown != null && tTD.mouseDown == true) {
            tTD.style.cursor = "default";
            if (tTD.oldWidth + (event.x - tTD.oldX) > 0)
              tTD.width = tTD.oldWidth + (event.x - tTD.oldX);
            //调整列宽
            tTD.style.width = tTD.width;
            tTD.style.cursor = "col-resize";
            //调整该列中的每个Cell
            table = tTD;
            while (table.tagName != "TABLE") table = table.parentElement;
            for (j = 0; j < table.rows.length; j++) {
              table.rows[j].cells[tTD.cellIndex].width = tTD.width;
            }
            //调整整个表
            table.width = tTD.tableWidth + (tTD.offsetWidth - tTD.oldWidth);
            table.style.width = table.width;
          }
        };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
td {
  position: relative;
  // height: 200px;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    background: green;
    cursor: ew-resize;
  }
}
.table-container {
  position: relative;
  width: 100%;
  padding: 20px;
  table {
    width: 100%;
  }
}
.resize-guide {
  position: fixed;
  border-left: 1px dashed #000; /* dashed line */
  height: 100%;
  top: 0;
}
</style>